<template>
    <div>
        <h3 style="text-align: center;">物流价格计算</h3>
     <div style="display: flex; justify-content:space-between">
       <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="包裹重量" prop="weight">
    
    <el-input-number v-model="ruleForm.weight"  :min="1" :max="10000000" label="请输入包裹重量"></el-input-number>
<span style="margin-left: 10px;color: #999;"> kg</span></el-form-item>
  <el-form-item label="包裹长度" prop="length">
    <el-input-number v-model="ruleForm.length"  :min="1" :max="150" label="请输入包裹长度"></el-input-number>
 
 <span style="margin-left: 10px;color: #999;"> cm</span>
  </el-form-item>
  <el-form-item label="包裹宽度" prop="width">
    <el-input-number v-model="ruleForm.width"
      :min="1" :max="80" label="请输入包裹宽度"></el-input-number>
      <span style="margin-left: 10px;color: #999;"> cm</span>
  </el-form-item>
  <el-form-item label="包裹高度" prop="height">
    <el-input-number v-model="ruleForm.height"
      :min="1" :max="80" label="请输入包裹高度"></el-input-number>
      <span style="margin-left: 10px;color: #999;"> cm</span>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">计算</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
       </div>
       <div style="width: 50%;margin-right: 10px;">
        计算结果

        datas
        <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
    
    <el-descriptions-item v-for="(item , index) in datas" :key="index">
      <template slot="label">
        <i class="el-icon-user"></i>
        {{item.name}}
      </template>
      {{item.freight}}
    </el-descriptions-item>

 
   
  </el-descriptions>
       </div>

     </div>
    </div>
  </template>
  
  <script>
      import {shopShu,countw} from '@/api/login'
  
      export default {
    data() {
      return {
        ruleForm: {
            length: undefined,
            width: undefined,
            height: undefined,
            weight: undefined,
        
        },datas: [
        {
            "name": "e包裹",
            "freight": "82.5元"
        },
        {
            "name": "Eub特惠",
            "freight": "50.2元"
        }
    ],
        rules: {
            length: [
            { required: true, message: '请输入包裹长度', trigger: 'blur' },
          ],
          width: [
            { required: true, message: '请输入包裹宽度', trigger: 'change' }
          ],
          height: [
            { type: 'date', required: true, message: '请输入包裹高度', trigger: 'change' }
          ],
          weight: [
            { type: 'date', required: true, message: '请输入包裹重量', trigger: 'change' }
          ],
        
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
          
let dai= {
            length: undefined,
            width: undefined,
            height: undefined,
            weight: undefined,
        
        }
          for(let key in this.ruleForm){
       
  if (Object.hasOwnProperty.call(this.ruleForm, key)) {
    
    const value = this.ruleForm[key];
    console.log(value);
    if ( key === "width"||key ==="length"||key ==='height') {
        dai[key] = parseFloat(value.toFixed(2));
    }else if(key === "weight"){
        dai[key] = parseFloat(value.toFixed(3));
    }
  }
          }
          countw(dai).then(()=>{
            this.$modal.msgSuccess("计算成功");
          })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .fonc{font-weight: 700; font-size: 26px;
  }
   .echart-box{
              width: 100%;
              height: 350px;
              margin: 20px auto;
          }
  
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
   
      margin-bottom: 20px;
    }
  
    ul {
      padding: 0;
      margin: 0;
    }
  
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;
  
    ul {
      list-style-type: none;
    }
  
    h4 {
      margin-top: 0px;
    }
  
    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }
  
    p {
      margin-top: 10px;
  
      b {
        font-weight: 700;
      }
    }
  
    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
  </style>
  
  